<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>东财个股资金流</title>
		<link href="css/text.css" rel="stylesheet" type="text/css" />
		<style type="text/css">				
			p {margin:0px;}					
			ul {margin:0px;}			
			h4 {margin:0px}	
			
			.fixedBox{					
				white-space: nowrap;	
			}
			.fixedBox::-webkit-scrollbar {
				width: 8px;     
				height: 8px;				
			}			
		</style>		
		<script type="text/javascript" src="js/json2html.js"></script>
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="js/echarts.js"></script>
	</head>
	<body>
		<div id="towrite" class="fixedBox">
			<div id="title" style="height:20px;"></div>
			<div id="main1" style="float:left; width: 220px; height:180px; border: 1px solid #555555;"></div>
			<div id="towrites" style="float:left; width: 650px; height:180px;">
				<div id="main2" style="float:left; width: 200px; height:80px; border: 1px solid #555555;"></div>
				<div id="main3" style="float:left; width: 200px; height:80px; border: 1px solid #555555;"></div>
				<div id="main4" style="float:left; width: 200px; height:80px; border: 1px solid #555555;"></div>
				<div id="main5" style="float:left; width: 200px; height:80px; border: 1px solid #555555;"></div>
				<div id="main6" style="float:left; width: 200px; height:80px; border: 1px solid #555555;"></div>
			</div>
		</div>
		<script>			
			window.onload = function() {				
				getSource();
				changeStyle();
				
			}
			
			$(function() {
				setInterval(function() {									
					getSource();																				
				},
				500);
			})
			
			function time_range(beginTime, endTime) {
				var strb = beginTime.split(":");
				if (strb.length != 2) {
					return false;
				}

				var stre = endTime.split(":");
				if (stre.length != 2) {
					return false;
				}

				var b = new Date();
				var e = new Date();
				var n = new Date();

				b.setHours(strb[0]);
				b.setMinutes(strb[1]);
				e.setHours(stre[0]);
				e.setMinutes(stre[1]);

				if (n.getTime() - b.getTime() > 0 && n.getTime() - e.getTime() < 0) {
					v = 1;								
					console.log(true)　　　　　　
					return true;				
				} else {
					console.log(false)
				    return false;     
				}
			}　　　  　　　			
			
			function changeStyle() {				
				var obj = document.getElementById("towrite");
				obj.style.left= "0px"; 
				obj.style.width= "1300px";
				//obj.style.height= "500px";
				//obj.style.fontSize ="12px";
				//obj.style.marginTop= "-10px";
				//obj.style.marginLeft = "2px";  					
			}			
			
			var z = 0;  //刷新
			var v = 0;	//刷新		
			var gpdm = "";
			var gpmc = "";				
			function getSource() {			
				var u = decodeURI(window.location.href);								
				if(u.indexOf("##") > -1){
					var gp = u.split('##');				
					dm = gp[1];
					gpmc = gp[2];															
				}else{
					dm = "600000";
					gpmc = "浦发银行";					
				}
								
				if(dm != gpdm || v == 1){				
					v = 0;					
					gpdm = dm;					
					var dms = "";
					var dmt = "";
					if(dm.substr(0,1)=="6"){
						dms = "SH" + dm;
						dmt = "1." + dm;
					}else{
						dms = "SZ" + dm;
						dmt = "0." + dm;
					}
					
					var div = document.getElementById('title');				
					var back = '<a href="javascript:back();"  style="position:absolute; left:170px;color:#fff;">←</a>';
					var clear = '<a href="javascript:forward(0);"  style="position:absolute; left:260px;color:#fff;font-size:12px;">今</a>';
					var forward = '<a href="javascript:forward(1);"  style="position:absolute; left:210px;color:#fff;">→</a>';
					var zjwz = '<a href="https://data.eastmoney.com/zjlx/' + gpdm + '.html" target="_blank" style="position:absolute; left:300px;font-size:12px;">网址</a>';					
					div.innerHTML = "<h4>" + gpdm + "&nbsp;&nbsp;&nbsp;" + gpmc + back + forward + clear + zjwz + "</h4>";
					l = 1;
					t = 0;					
					var url1 ="https://push2.eastmoney.com/api/qt/stock/fflow/kline/get?cb=jQuery112307210117858571967_1661746324015&klt=1&fields1=f1,f2,f3,f7&fields2=f51&secid=" + dmt;
					xmlHttp1 = new XMLHttpRequest();					
					xmlHttp1.onreadystatechange = writeSource;
					xmlHttp1.open("GET", url1, true);
					xmlHttp1.send(null);
					
					var url2 = "http://push2.eastmoney.com/api/qt/ulist.np/get?cb=jQuery1123022062381139471432_1633842668576&fltt=2&secids=" + dmt +"&fields=f62,f184,f66,f69,f72,f75,f78,f81,f84,f87,f164";																
					xmlHttp2 = new XMLHttpRequest();					
					xmlHttp2.onreadystatechange = writeSource;
					xmlHttp2.open("GET", url2, true);
					xmlHttp2.send(null);
					
					var url = "https://push2his.eastmoney.com/api/qt/stock/fflow/daykline/get?cb=jQuery112309685262356049713_1661657886677&lmt=0&klt=101&fields1=f1,f2,f3,f7&fields2=f51,f52,f53,f54,f55,f56,f57,f58,f59,f60,f61,f62,f63,f64,f65&secid=" + dmt;
					xmlHttp = new XMLHttpRequest();					
					xmlHttp.onreadystatechange = writeSource;
					xmlHttp.open("GET", url, true);
					xmlHttp.send(null);					
				}else{
					z++;
					if(z == 120){
						z = 0;
						time_range("9:00","15:15")  //刷新数据
					}
				}
			}
			
			var zjs = "";
			function writeSource() { 
				if (xmlHttp.readyState == 4 && xmlHttp1.readyState == 4 && xmlHttp2.readyState == 4) { 
					var data1 = xmlHttp1.responseText
					var data2 = xmlHttp2.responseText
					var rq = "";
					if(data1.indexOf('"klines":\[\]') == -1){
						rq = data1.match(/"klines":\["(\S*) /)[1];
					}
					//document.write(rq);
					
					var data = xmlHttp.responseText
					//document.write(data);
					var ss = "";
					if(data.indexOf('"data":null') == -1){
						data = data.match(/"klines":\[(\S*)\]/)[1];
						ss = data + ",";
					}else{
						data = "";
						ss = "";
					}
					
					if(rq == "" || data.indexOf(rq) > -1){
						zjs = data;
					}else{
						var zljlr = data2.match(/"f62":(\S*),"f66/)[1];
						var zljb = data2.match(/"f184":(\S*)}]}/)[1];					
						var cddjlr = data2.match(/"f66":(\S*),"f69/)[1];
						var cddjb = data2.match(/"f69":(\S*),"f72/)[1];					
						var ddjlr = data2.match(/"f72":(\S*),"f75/)[1];
						var ddjb = data2.match(/"f75":(\S*),"f78/)[1];					
						var zdjlr = data2.match(/"f78":(\S*),"f81/)[1];
						var zdjb = data2.match(/"f81":(\S*),"f84/)[1];					
						var xdjlr = data2.match(/"f84":(\S*),"f87/)[1];
						var xdjb = data2.match(/"f87":(\S*),"f164/)[1];
						
						zjs = ss + '"' + rq + "," + zljlr + "," + xdjlr + "," + zdjlr + "," + ddjlr + "," + cddjlr + "," + zljb + "," + xdjb + "," + zdjb + "," + ddjb + "," + cddjb + '"';
					}
					//document.write(zjs);
					var ss = zjs.split('","')
					
					var aa = ss[ss.length - 1].split(',');
					var bt = aa[0].replace('\"','');
					var zljlr = aa[1];
					var cddjlr = aa[5];
					var ddjlr = aa[4];
					var zdjlr = aa[3];
					var xdjlr = aa[2];
					
					var datas = "[" + zljlr + "," + cddjlr + "," + ddjlr + "," + zdjlr + "," + xdjlr + "]";					
					GetChart("main1", datas, bt);					
					Addzj();
				}
			}
			
			function NumberTransform(num) { 
				var result = num;
               if(Math.abs(num) > 100000000){
			    result = num / 100000000;
				result = result.toFixed(2) + "亿";
			   }else if(Math.abs(num) > 10000){
			    result = num/10000;
				result = result.toFixed(0) + "万";
			   }				   
               return result;  
			};				
			
			var t = 0;
			function back() {				
				var ss = zjs.split('","')
				var n = ss.length;
				//alert(t)
				//alert(ss[n-t-2])
				var m = n - t - 2;
				//alert(m)
				if(m >= 0){
					var aa = ss[m].split(',');				
					var bt = aa[0].replace('\"','');
					var zljlr = aa[1];
					var cddjlr = aa[5];
					var ddjlr = aa[4];
					var zdjlr = aa[3];
					var xdjlr = aa[2];
					var datas = "[" + zljlr + "," + cddjlr + "," + ddjlr + "," + zdjlr + "," + xdjlr + "]";					
					GetChart("main1", datas, bt);
					t++;
					//alert(t)
					Addzj();
				}
				
			}
			
			function forward(p) {
				if( p == 0){
					t = 1;
				}				
				var ss = zjs.split('","')
				var n = ss.length;				
				var m = n - t;				
				if(m < 102){
					var aa = ss[m].split(',');				
					var bt = aa[0].replace('\"','');
					var zljlr = aa[1];
					var cddjlr = aa[5];
					var ddjlr = aa[4];
					var zdjlr = aa[3];
					var xdjlr = aa[2];
					var datas = "[" + zljlr + "," + cddjlr + "," + ddjlr + "," + zdjlr + "," + xdjlr + "]";					
					GetChart("main1", datas, bt);
					t--;
					Addzj();
				}				
			}			
			
			var datas1 = "";
			var datas2 = "";
			var datas3 = "";
			var datas4 = "";
			var datas5 = "";			
			function Addzj() {
				datas1 = "";
				datas2 = "";
				datas3 = "";
				datas4 = "";
				datas5 = "";
				var n = 0;
				var a = 0;
				var b = 0;
				var c = 0;
				var d = 0;
				var e = 0;
				var ss = zjs.split('","')
				var end = ss.length - 1;
				var p = ss.length - t;
				if(p > 0){
					if(p >= 10){
						p = 10;
					}				
					for(var i = end - t; i >= ss.length - t - p; i--){											
						n++;									
						var aa = ss[i].split(',');
						//alert(aa[0])						
						zljlr = aa[1];
						cddjlr = aa[5];
						ddjlr = aa[4];
						zdjlr = aa[3];
						xdjlr = aa[2];					
						a += Number(zljlr);	
						b += Number(cddjlr);
						c += Number(ddjlr);
						d += Number(zdjlr);
						e += Number(xdjlr);
						datas1 += NumberTrans(a) + ",";
						datas2 += NumberTrans(b) + ",";
						datas3 += NumberTrans(c) + ",";
						datas4 += NumberTrans(d) + ",";
						datas5 += NumberTrans(e) + ",";						
					}
					datas1 = "[" + datas1 + "]";
					datas2 = "[" + datas2 + "]";
					datas3 = "[" + datas3 + "]";
					datas4 = "[" + datas4 + "]";
					datas5 = "[" + datas5 + "]";
					
					//alert(datas1)
					//alert(datas2)
					GetChart2("main2" ,datas1, '主力');	
					GetChart2("main3" ,datas2, '超大单');
					GetChart2("main4" ,datas3, '大单');
					GetChart2("main5" ,datas4, '中单');
					GetChart2("main6" ,datas5, '小单');	
				}				
			}
			
			function NumberTrans(num) { 
				var result = num;               
			    result = num/10000;
				result = result.toFixed(0);			   				  
               return result;  
			};				
		</script>
		
		<script>
			function GetChart(id , datas, bt) {
				//alert(datas)
				var json = JSON.parse(datas);
				var myChart = echarts.init(document.getElementById(id));
				
				var option = {
						title:{
							 left:'right',
							text: bt + ' 资金流向',
							textStyle:{ //设置主标题风格
								color:'#FFFF00',//设置主标题字体颜色
								fontStyle:'normal',//主标题文字风格
								fontSize: 12
							}
						},
						<!-- tooltip: {   //提示框 -->
							<!-- trigger: 'axis',  //当trigger为’item’时只会显示该点的数据，为’axis’时显示该列下所有坐标轴所对应的数据。 -->
							<!-- axisPointer: { -->
								<!-- type: 'line', // 指示器类型（'line' 直线指示器；'shadow' 阴影指示器；'none' 无指示器；'cross' 十字准星指示器。）								 -->
								<!-- crossStyle: { -->
									<!-- color: '#fff' -->
								<!-- } -->
							<!-- }, -->
							<!-- textStyle:{ 								 -->
								<!-- fontSize: 12 -->
							<!-- }, -->
							<!-- formatter: function (params) { -->
							 <!-- var a = params[0].name  //表示x轴数据 -->
							 <!-- var b = params[0].value //表示y轴数据 -->
							 <!-- return NumberTransform(b);							  -->
							 <!-- return str -->
						   <!-- }, -->
						<!-- }, -->

						<!-- legend: {  //图例 -->
							<!-- show:false -->
						<!-- }, -->
						grid: { // 边距
						  left: '1%',
						  right: '1%',
						  bottom: '30%',
						  top: '20%',
						  //containLabel: true  //grid 区域是否包含坐标轴的刻度标签
						},
        
						xAxis: [				  
							{
								type: 'category',								
								data: ['主力', '超大单', '大单', '中单', '小单'], // 从原始数据中提取个数组出来
								axisLine:{
									lineStyle:{//改变xy轴线条的颜色
										color:"#696969",
										//width:1
									}
								},
								axisLabel:{									
									//rotate:45，//倾斜45°
									formatter:function(value){   //文字竖直显示
										return value.split("").join("\n");
									}, 
									textStyle:{//改变xy轴上文字的颜色
										color:"#FFF",
										fontSize: 12
									}
								},
								axisPointer: {
									type: 'shadow'
								}
							}
						],

						yAxis: [
							{
								type: 'value',								
								splitLine:{ //网格线
									show:false
								},
								axisLabel: {
									formatter: '{value} 万'
								}
							},
						],

						series: [
							{
								name: '净流入',
								type: 'bar',
								barGap: 0,
								//barCategoryGap:'50%',
								barWidth: 30, // 柱图宽度
								
								label: {   //数值显示
									normal: {
										
									  show: true,//开启显示
									  position: 'top',//柱形上方
									  formatter:function(param){   //文字竖直显示									  
										var c = param.value;								  
										return NumberTransform(c);
										}, 
									  textStyle: { //数值样式
										color: '#fff',
										fontSize: 10
									  }
									}
								},
								
								itemStyle:{
									normal: {								
										color: function (params) { //根据数值大小设置相关颜色
											if (params.value > 0) {
												return 'red'
											} else {
												return 'Chartreuse'
											}
										}
									}
								},
								data: json
							}
						]
					};
		 
					myChart.setOption(option);
			}
		</script>
		
		<script>
			function GetChart2(id ,datas, bt) {				
				var json = JSON.parse(datas.replace(',]',']'));				
				var myChart = echarts.init(document.getElementById(id));
				
				var option = {
						title:{
							 left:'right',
							text: '10日' + bt + '资金流向',
							textStyle:{ //设置主标题风格
								color:'#FFFF00',//设置主标题字体颜色
								fontStyle:'normal',//主标题文字风格
								fontSize: 12
							}
						},
						tooltip: {   //提示框
							trigger: 'axis',
							axisPointer: {
								type: 'cross',
								crossStyle: {
									color: '#fff'
								}
							},
							textStyle:{ 								
								fontSize: 12
							}
						},

						<!-- legend: {  //图例 -->
							<!-- show:false -->
						<!-- }, -->
						grid: { // 边距
						  left: '1%',
						  right: '1%',
						  bottom: '25%',
						  top: '25%',
						  //containLabel: true  //grid 区域是否包含坐标轴的刻度标签
						},
        
						xAxis: [				  
							{
								type: 'category',								
								data: ['1日', '2日', '3日', '4日', '5日', '6日', '7日', '8日', '9日', '10日'], 
								axisLine:{
									lineStyle:{//改变xy轴线条的颜色
										color:"#696969",
										//width:1
									}
								},
								axisLabel:{									
									//rotate:45，//倾斜45°
									<!-- formatter:function(value){   //文字竖直显示 -->
										<!-- return value.split("").join("\n"); -->
									<!-- },  -->
									textStyle:{//改变xy轴上文字的颜色
										color:"#FFF"
									}
								},
								axisPointer: {
									type: 'shadow'
								}
							}
						],

						yAxis: [
							{
								type: 'value',								
								splitLine:{ //网格线
									show:false
								},
								axisLabel: {
									formatter: '{value} 万'
								}
							},
						],

						series: [
							{
								name: bt,
								type: 'bar',
								//barGap: 0,
								//barCategoryGap:'50%',
								barWidth: 10, // 柱图宽度								
								itemStyle:{
									normal: {								
										color: function (params) { //根据数值大小设置相关颜色
											if (params.value > 0) {
												return 'red'
											} else {
												return 'Chartreuse'
											}
										}
									}
								},
								data: json
							},							
							{
								data: json,
								type: 'line',								
								//symbol: 'circle',//拐点样式
								//symbolSize: 18,//拐点大小
								itemStyle: {
								  normal: {
									lineStyle: {
									  width: 2,//折线宽度
									  color: "#FFA500"//折线颜色
									},
									color: '#27dba0',//拐点颜色
									borderColor: '#fff',//拐点边框颜色
									borderWidth: 1//拐点边框大小
								  },
								  emphasis: {
									color: '#4CCEFE'//hover拐点颜色定义
								  }
								},
							}
						]
					}					
					myChart.setOption(option);
			}
		</script>
	</body>
</html>